<template>
	<view class="shop-bar">
		<view class="left">
			<view class="phone u-flex u-flex-column u-flex-center"  @click="callPhone" >
				<u-icon name="phone" size="38"></u-icon> 
				<text class="font-size13">热线</text>
			</view>
			<view @click="showShare"  class="share u-flex u-flex-column u-flex-center u-margin-left-40">
				<u-icon name="share-square" size="38"></u-icon>
				<text class="font-size13">分享</text>
			</view>
		</view>
		<view class="right-btn">
			<view class="order-btn" @tap="onClickBuyBtn"  
			:style="{backgroundColor:ee.bgColor.weight}">
				<text class="font-size15">立即购买</text>
			</view>
		</view>
		
		
		
		<kb-share-paper v-if="show" v-model:show="show" :good="good"></kb-share-paper>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		onActivated,
		watchEffect,
		watch,
		provide,
		nextTick,
		computed
	} from 'vue';
	
	import {usePageStore}  from "@/common/tools/store.js";
	const ee = usePageStore();
	
	const props = defineProps(['good'])
	
	const show = ref(false);
	function showShare()
	{
		show.value = !show.value;
	}
	
	const emits = defineEmits(['clickBuyBtn']);
	
	function onClickBuyBtn(e){
		emits('clickBuyBtn', e)
	}
	//拨打电话
	function callPhone(){
		ee.callPhone( ee.company.company_phone)
	}
	
</script>

<style lang="scss">
	.shop-bar{
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
		padding:10px;
		// border-top: $u-border-color 1px solid;
	    box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.5);
		 
		
		.left{
			display: flex;
			width: 65%;
			text-align: center;
		}
		
		.right-btn{
			width: 30%;
			min-width: 90px;
		}
		
		.order-btn{
			color: #ffffff;
			padding:10px;
			text-align: center;
			font-weight: bold;
			border-radius: 4px;
		}
	}
</style>